<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>体温单</title>
    <script src="https://cdn.jsdelivr.net/npm/zrender/dist/zrender.js"></script>
</head>
<body>
    <div id="tChart" style="width: 100%;height: 100vh;"></div>

    <script>
    // 初始化zrender实例
    let zr;
    let INITY = 10; // 与Vue组件中的INIT_Y常量对应
    
    // 模拟Vue数据
    const mockData = {
      tb_height: 10,
      firstFlag: true,
      zrInstance: null,
      oldData: null,
      datas: [
        {
          hosName: '',
          deptName: '',
          admissionDate: '',
          dischargeDate: '',
          motherName: null,
          name: '',
          newbornFlg: null,
          birthDate: '',
          sex: '',
          age: '',
          bedNo: '',
          visitNo: '',
          serialNo: '',
          fullDays: [
            '',
            '',
            '',
            '',
            '',
            '',
            ''
          ],
          days: [
            '',
            '',
            '',
            '',
            '',
            '',
            ''
          ],
          inHosDays: [
            '',
            '',
            '',
            '',
            '',
            '',
            ''
          ],
          operationDays: [
            null,
            null,
            null,
            null,
            null,
            null,
            null
          ],
          hours: [
            '',
            '',
            '',
            '',
            '',
            ''
          ],
          alyKey: [
            '',
            '',
            '',
            '',
            ''
          ],
          pageNo: 1,
          tbData: [
            {
              datetime: '',
              auxiliary: [
                {
                  key: '',
                  value: ''
                },
                {
                  key: '',
                  value: ''
                },
                {
                  key: '',
                  value: [
                    ''
                  ]
                },
                {
                  key: '',
                  value: ''
                }
              ],
              hours: [
                {
                  temperature: null,
                  reductionTemperature: null,
                  breathe: null,
                  breatheType: null,
                  pulse: null,
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: '0'
                },
                {
                  temperature: null,
                  reductionTemperature: null,
                  breathe: null,
                  breatheType: null,
                  pulse: null,
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: ''
                },
                {
                  temperature: '',
                  reductionTemperature: null,
                  breathe: '',
                  breatheType: null,
                  pulse: '',
                  heartRate: null,
                  painLevel: '',
                  painIntervention: null,
                  topMark: '',
                  bottomMark: null,
                  isinterrupt: '0'
                },
                {
                  temperature: '',
                  reductionTemperature: null,
                  breathe: '',
                  breatheType: null,
                  pulse: '',
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: '0'
                },
                {
                  temperature: '',
                  reductionTemperature: null,
                  breathe: '',
                  breatheType: null,
                  pulse: '',
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: '0'
                },
                {
                  temperature: null,
                  reductionTemperature: null,
                  breathe: null,
                  breatheType: null,
                  pulse: null,
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: '0'
                }
              ]
            },
            {
              datetime: '',
              auxiliary: [
                {
                  key: '',
                  value: ''
                }
              ],
              hours: [
                {
                  temperature: null,
                  reductionTemperature: null,
                  breathe: null,
                  breatheType: null,
                  pulse: null,
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: ''
                },
                {
                  temperature: '',
                  reductionTemperature: null,
                  breathe: '',
                  breatheType: null,
                  pulse: '',
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: ''
                },
                {
                  temperature: '',
                  reductionTemperature: null,
                  breathe: '',
                  breatheType: null,
                  pulse: '',
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: '0'
                },
                {
                  temperature: '',
                  reductionTemperature: null,
                  breathe: '',
                  breatheType: null,
                  pulse: '',
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: ''
                },
                {
                  temperature: '',
                  reductionTemperature: null,
                  breathe: '',
                  breatheType: null,
                  pulse: '',
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: ''
                },
                {
                  temperature: null,
                  reductionTemperature: null,
                  breathe: null,
                  breatheType: null,
                  pulse: null,
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: '0'
                }
              ]
            },
            {
              datetime: '03',
              auxiliary: [
                {
                  key: '',
                  value: ''
                }
              ],
              hours: [
                {
                  temperature: null,
                  reductionTemperature: null,
                  breathe: null,
                  breatheType: null,
                  pulse: null,
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: '0'
                },
                {
                  temperature: '',
                  reductionTemperature: null,
                  breathe: '',
                  breatheType: null,
                  pulse: '',
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: ''
                },
                {
                  temperature: '',
                  reductionTemperature: null,
                  breathe: '',
                  breatheType: null,
                  pulse: '',
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: ''
                },
                {
                  temperature: '',
                  reductionTemperature: null,
                  breathe: '',
                  breatheType: null,
                  pulse: '',
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: ''
                },
                {
                  temperature: '',
                  reductionTemperature: null,
                  breathe: '',
                  breatheType: null,
                  pulse: '',
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: ''
                },
                {
                  temperature: null,
                  reductionTemperature: null,
                  breathe: null,
                  breatheType: '',
                  pulse: null,
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: '0'
                }
              ]
            },
            {
              datetime: '',
              auxiliary: [
                {
                  key: '',
                  value: ''
                }
              ],
              hours: [
                {
                  temperature: null,
                  reductionTemperature: null,
                  breathe: null,
                  breatheType: null,
                  pulse: null,
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: '0'
                },
                {
                  temperature: '',
                  reductionTemperature: null,
                  breathe: '',
                  breatheType: null,
                  pulse: '',
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: '0'
                },
                {
                  temperature: '',
                  reductionTemperature: null,
                  breathe: '',
                  breatheType: null,
                  pulse: '',
                  heartRate: null,
                  painLevel: '',
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: '0'
                },
                {
                  temperature: null,
                  reductionTemperature: null,
                  breathe: null,
                  breatheType: null,
                  pulse: null,
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: '0'
                },
                {
                  temperature: null,
                  reductionTemperature: null,
                  breathe: null,
                  breatheType: null,
                  pulse: null,
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: '0'
                },
                {
                  temperature: null,
                  reductionTemperature: null,
                  breathe: null,
                  breatheType: null,
                  pulse: null,
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: '0'
                }
              ]
            },
            {
              datetime: '05',
              auxiliary: [
                {
                  key: '大便',
                  value: '1'
                }
              ],
              hours: [
                {
                  temperature: null,
                  reductionTemperature: null,
                  breathe: null,
                  breatheType: '0',
                  pulse: null,
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: '0'
                },
                {
                  temperature: null,
                  reductionTemperature: null,
                  breathe: null,
                  breatheType: '0',
                  pulse: null,
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: '0'
                },
                {
                  temperature: '',
                  reductionTemperature: null,
                  breathe: '',
                  breatheType: null,
                  pulse: '',
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: '0'
                },
                {
                  temperature: null,
                  reductionTemperature: null,
                  breathe: null,
                  breatheType: '0',
                  pulse: null,
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: '0'
                },
                {
                  temperature: null,
                  reductionTemperature: null,
                  breathe: null,
                  breatheType: '0',
                  pulse: null,
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: '0'
                },
                {
                  temperature: null,
                  reductionTemperature: null,
                  breathe: null,
                  breatheType: '0',
                  pulse: null,
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: '0'
                }
              ]
            },
            {
              datetime: '',
              auxiliary: [
                {
                  key: '',
                  value: ''
                }
              ],
              hours: [
                {
                  temperature: null,
                  reductionTemperature: null,
                  breathe: null,
                  breatheType: null,
                  pulse: null,
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: '0'
                },
                {
                  temperature: null,
                  reductionTemperature: null,
                  breathe: null,
                  breatheType: null,
                  pulse: null,
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: '0'
                },
                {
                  temperature: '',
                  reductionTemperature: null,
                  breathe: '',
                  breatheType: null,
                  pulse: '',
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: '0'
                },
                {
                  temperature: null,
                  reductionTemperature: null,
                  breathe: null,
                  breatheType: null,
                  pulse: null,
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: '0'
                },
                {
                  temperature: null,
                  reductionTemperature: null,
                  breathe: null,
                  breatheType: null,
                  pulse: null,
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: '0'
                },
                {
                  temperature: null,
                  reductionTemperature: null,
                  breathe: null,
                  breatheType: null,
                  pulse: null,
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: '0'
                }
              ]
            },
            {
              datetime: '',
              auxiliary: [
                {
                  key: '',
                  value: ''
                }
              ],
              hours: [
                {
                  temperature: null,
                  reductionTemperature: null,
                  breathe: null,
                  breatheType: false,
                  pulse: null,
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: '0'
                },
                {
                  temperature: null,
                  reductionTemperature: null,
                  breathe: null,
                  breatheType: false,
                  pulse: null,
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: '0'
                },
                {
                  temperature: '',
                  reductionTemperature: null,
                  breathe: '',
                  breatheType: null,
                  pulse: '',
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: false
                },
                {
                  temperature: null,
                  reductionTemperature: null,
                  breathe: null,
                  breatheType: false,
                  pulse: null,
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: false
                },
                {
                  temperature: null,
                  reductionTemperature: null,
                  breathe: null,
                  breatheType: false,
                  pulse: null,
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: false
                },
                {
                  temperature: null,
                  reductionTemperature: null,
                  breathe: null,
                  breatheType: false,
                  pulse: null,
                  heartRate: null,
                  painLevel: null,
                  painIntervention: null,
                  topMark: null,
                  bottomMark: null,
                  isinterrupt: false
                }
              ]
            }
          ],
          startDateStr: ''
        }
      ]
    };
    
    // 初始化图表
    function initZr() {
        const container = document.getElementById('tChart');
        zr = zrender.init(container);
        DrawUtil.initHoverText(zr);
        
        // 绘制外围表格
        periphery.tbHeader(mockData, zr);
        periphery.topTable(mockData.datas[0], zr, { tb_height: INITY });
        periphery.leftTable(mockData.datas[0], zr, { tb_height: INITY });
        
        // 初始化中心图表
        Tchart.init(mockData.datas[0], zr, {
             x: 120,
            y: 185,
            btEnabled: true,
            pulseEnabled: true,
            breatheEnabled: true,
            nurseEventEnabled: true
        });
        
        periphery.bottomTable(mockData.datas[0], zr, { tb_height: INITY });
    }

    // 窗口变化时重置
    window.addEventListener('resize', () => {
        zr.resize();
    });

    // 组件卸载时销毁
    window.addEventListener('beforeunload', () => {
        zr.dispose();
    });

    // 初始化执行
    document.addEventListener('DOMContentLoaded', initZr);
    </script>

    <!-- 引入子模块 -->
    <script src="./tchart/generalPurpose/drawUtil.js"></script>
    <script src="./tchart/generalPurpose/centre.js"></script>
    <script src="./tchart/generalPurpose/index.js"></script>
    <script src="./tchart/generalPurpose/tchart.config.js"></script>
</body>
</html>